Readable Code

Click Here For Video Review

Clean Code Example Below

Lets take some time to make sure your HTML is clean.
Respect the tab (teachers love to shout this)!

Before you move on it's a good idea to make sure your HTML elements are easy to read and have clear parent / child relationships.
This will help when adding new code in the upcoming lessons!

For an example look at the image to the right!

See how each li tag is indented between the ol tags?!
The li tags are considered child tag of the ol
Just like body and head tags are child tags of HTML (which makes them siblings.)

Notice how clear it is where a tag begins and ends.

Each child element is intended one tab from its parent.

If another coder needed to add code to your page, it's helpful for them to know where each element clearly begins and ends.


When you understand this slide, Click the RIGHT ARROW to move on!


Practice

Click Here For Video Review

This little slide will let you practice indenting lines of code to clearly show where tags begin and end!

Follow the instructions on the left!

  1. Clean up the code.
  2. If an HTML tag opens inside of another HTML tag, then it needs to be tabbed inside that parent tag!
  3. Use the tab key indent the lines of code the correct amount!
ANSWER <html>
<head>
<title> Correct Tabs! </title>
</head>
<body>
<center><h1> Clean Up Your Code!</h1></center>
<p style="color:cyan"> Clean up this code, use the tab!</p>
</body>
</html>

Notice the how the tags are nested!


When you understand this slide, Click the RIGHT ARROW to move on!


Activity

Click Here For Video Review

This Activity will walk you through:

  1. Making sure you code is indented correctly!
Read the next lines carefully!
  1. Look at your own HTML code inside your index.html file.
  2. Use tabs or spaces to make your code easy to read.

    3. This is very important. It will make the future lessons a lot easier!

    EXAMPLE <html> <head> <title>My Website</title> </head> <body> <h1>Seth Iorg</h1> <p> I was born in <u>St Louis</u> and have lived in 2 different countries and 6 different states. I once was <b>31 years old</b>. I enjoy <mark>computers</mark> and learning programming. </p> <p> Things I like:</p> <ol> <li>Baseball</li> <li>Basketball</li> <li>Building Websites</li> </ol> <h3>Simpsons Trivia Question:</h3> <em> <b> <div style="color:red">What is Chief Wiggum's first name?</div> </b> </em> <br /> <form> <input type="radio" name="trivia" value="cletus">Cletus<br /> <input type="radio" name="trivia" value="clancey">Clancey<br /> <input type="radio" name="trivia" value="seymour">Seymour<br /> <input type="radio" name="trivia" value="armin">Armin Tamzarian<br /> <input type="submit" value="Submit"> </form> <br /> <br /> <img src="https://thumbs.dreamstime.com/x/waterton-lake-moose-10756889.jpg" /> <hr /> <center>Seth Iorg | <a href="alf.jpg">My favorite Website</a> </body> </html>

    The above is just an example, use tabs to make your website more readable.

Move on to the next Lesson when ready and learn about External Style Sheets.